<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智慧校园系统-登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!--    1.引入layui相关的css和js-->
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"></link>
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
    <!-- load css -->
    <link rel="stylesheet" type="text/css" href="media/layui/css/layui.css"
          media="all">
    <link rel="stylesheet" type="text/css" href="media/css/login.css"
          media="all">
    <link rel="stylesheet" type="text/css" href="media/css/verify.css">
</head>
<body class="layui-bg-black">
<div class="layui-canvs"></div>
<div class="layui-layout layui-layout-login">
    <form method="get" onclick="return false" class="layui-form" action="">
        <h1>
            <strong>智慧校园后台登录</strong> <em>ZhiHuiXiaoYuan Manager login system
        </em>
        </h1>
        <div class="layui-user-icon larry-login">
            <input type="text" placeholder="请输入账号Admin" class="login_txtbx" id="no"
                   name="name" value="Admin" />
        </div>
        <div class="layui-pwd-icon larry-login">
            <input type="password" placeholder="请输入密码密码123456" name="password" id="pass"
                   value="123456" class="login_txtbx" />
        </div>
        <div class="feri-code">
            <div id="mpanel4"></div>

        </div>
        <div class="layui-submit larry-login" style="margin-left: 153px">
            <input type="button" id="btn1" disabled="disabled" value="立即登陆"
                   button class="layui-btn" lay-submit lay-filter="demo1"/>
        </div>
    </form>
</div>
<script type="text/javascript" src="media/layui/layui.all.js"></script>
<script type="text/javascript" src="media/js/login.js"></script>
<!--互动的粒子动画特效插件  -->
<script type="text/javascript" src="media/js/jparticle.jquery.js"></script>
<script type="text/javascript" src="media/js/verify.min.js"></script>
<script type="text/javascript">
    $(function() {
        //互动的粒子动画特效插件
        $(".layui-canvs").jParticle({
            background: "#141414",
            color: "#E6E6E6"
        });
        //滑动验证码
        $('#mpanel4').pointsVerify({
            defaultNum : 6, //默认的文字数量
            checkNum : 3, //校对的文字数量
            vSpace : 2, //间隔
            imgName : [ '2.jpg' ],
            imgSize : {
                width : '400px',
                height : '200px',
            },
            barSize : {
                width : '400px',
                height : '40px',
            },
            ready : function() {
            },
            success : function() {
                //......后续操作
                $("#btn1").attr("disabled", false);
            },
            error : function() {
            }

        });

    });
    layui.use(['form'], function () {
        var form = layui.form
            , layer = layui.layer;
        //监听提交
        form.on('submit(demo1)', function (data) {
            //ajax 调用接口
            $.get("/api/user/login.do",data.field,function(res){
                if (res.code==200){
                    layer.msg('登录成功！');
                    location.href = "index.html"
                } else{
                    layer.msg('登录失败！');
                }

            });
        });
    });
</script>
</body>
</html>